<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="alternate icon" type="image/png" href="../i/favicon.png">
    <link rel="stylesheet" href="../css/amazeui.min.css"/>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/amazeui.min.js"></script>
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>考勤系统登录</h1>
    </div>
    <hr/>
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
        <br>
        <br>

        <form id="loginForm" method="post" class="am-form" action="/login">
            <label for="username">用户名:</label>
            <input type="text" name="username" id="username" value="">
            <br>
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" value="">
            <br>
            <label for="remember-me">
                <input id="remember-me" type="checkbox">
                记住密码
            </label>
            <br/>

            <div class="am-cf">
                <input type="submit"  name="" value="登录" class="am-btn am-btn-primary am-btn-sm am-fl">
                <input type="button" onclick="losePassword()" name="" value="忘记密码 ^_^? "
                       class="am-btn am-btn-default am-btn-sm am-fr">
            </div>
        </form>
        <hr>
        <script src="../js/footer.js"></script>
    </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">提示</div>
        <div class="am-modal-bd" id="msg">

        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>
</body>
<script src="../js/util.js"></script>
<script>
    function losePassword() {
        msg.innerHTML = "请联系管理员！";
        $('#my-alert').modal('open')
    }

    function login(){
        $.ajax({
            type: 'post',
            url: '/login',
            data: JSON.form2param($('#loginForm').serializeArray())
        });
    }

    $(function () {
        var url = location.search;
        if(url.indexOf("error") != -1){
            msg.innerHTML = "账号或密码错误！";
            $('#my-alert').modal('open')
        }
    });
</script>
</html>
